---
title: "styled"
description: "Styled API allows you to create styled React components using tagged template literals. "
---

import {
  ThisIsStyledComponent,
  ExampleContainer,
} from "../../../components/example";
import { Callout } from "nextra-theme-docs";

# Styled

Kuma UI's `styled` API allows you to create styled React components using tagged template literals. This makes it a familiar and comfortable choice for developers who have worked with libraries like styled-components or Emotion.

<Callout type="warning">
  Please note that the styled API does not currently support interpolations in
  the same way as libraries like styled-components or Emotion do. However, we
  are actively working to incorporate this feature, so stay tuned for updates.
</Callout>

## Import

```tsx copy
import { styled } from "@kuma-ui/core";
```

## Usage

<ExampleContainer>
  <ThisIsStyledComponent>hello world</ThisIsStyledComponent>
</ExampleContainer>

```tsx copy
export const ThisIsStyledComponent = styled.div`
  padding: 8px;
  color: white;
  background: black;
  @media (max-width: 500px) {
    color: blue;
  }
`;

// Then use it like so:
const Component = () => (
  <ThisIsStyledComponent>hello world</ThisIsStyledComponent>
);
```

In this example, we define a styled component `ThisIsStyledComponent` that changes the color of the text based on the viewport width. When the viewport width drops below 500px, the text color changes to blue.

## Syntax

You can also call `styled` as a function, passing the name of any intrinsic element type to it. The above is equivalent to:

```tsx copy
export const ThisIsStyledComponent = styled('div')`
  padding: 8px;
  color: white;
  background: black;
  @media (max-width: 500px) {
    color: blue;
  }
`;
```

## Extending styles

You can pass a styled component to the `styled` function to extend styles:

```tsx copy
const GreenButton = styled.button`
  background: green;
`;

const GreenButtonWithRedText = styled(GreenButton)`
  color: red;
`;
```

## Configuring and Using Breakpoints

The `styled` API also accepts shared media query breakpoints defined in your Kuma configuration (`kuma.config.ts`). For instance, if you have the following configuration:

```ts copy
export default createTheme({
  breakpoints: {
    sm: "500px",
    md: "700px",
  },
});
```

You can use these breakpoints in your styled components like so:

```tsx copy
export const ThisIsStyledComponent = styled.div`
  display: flex;
  flex-direction: row;
  @media (max-width: sm) {
    flex-direction: column;
  }
`;
```

In the above example, the `flex-direction` changes to `column` when the viewport width falls below the 'sm' breakpoint value defined in the configuration. Thus, you can leverage the power of these shared media query breakpoints to write more maintainable and consistent media queries in your styles.

## Using Theme Tokens

You can also utilize [theme tokens](/docs/Theme/ThemeTokens) directly within your `styled` function. This allows for a more cohesive and centralized way to manage your design values. Here's how you can use it:

```tsx
export const ColorComponent = styled.div`
  color: t("colors.primary");
`;
```

In the above example, `t("colors.primary")` fetches the primary color defined in your theme tokens, making it easier to maintain a consistent design across your application.
